<template>
	<view class="mask" v-if="showCalendar">
		<view class="calendar" @tap.stop>
			<view class="content" @tap.stop>
				<view class="title">
					<view class="sure" @click="cancel">取消</view>
					<view class="left">{{ date }}</view>
					<view class="sure" @click="confirmFun">确定</view>
				</view>
				<picker-view
					:indicator-style="indicatorStyle"
					:value="selectValue"
					@change="bindChange"
				>
					<picker-view-column>
						<view class="item" v-for="(item, index) in years" :key="index"
							>{{ item }}年</view
						>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in months" :key="index">{{
							item
						}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in days" :key="index">{{
							item
						}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in times" :key="index">{{
							item
						}}</view>
					</picker-view-column>
				</picker-view>
				<view class="bottom" v-if="isSwitch">
					<view class="switch">
						<view
							class="left"
							:class="{ active: type === 'solar' }"
							@click="switchBtn('solar')"
							>公历</view
						>
						<view
							class="right"
							:class="{ active: type === 'lunar' }"
							@click="switchBtn('lunar')"
							>农历</view
						>
						<view class="bg" :class="type"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { calendar } from './calendar';
export default {
	name: 'calendar',
	data() {
		return {
			years: [], //年
			months: [], //月
			days: [], //日
			times: [
				'时辰未知',
				'00:00-00:59(子)',
				'01:00-01:59(丑)',
				'02:00-02:59(丑)',
				'03:00-03:59(寅)',
				'04:00-04:59(寅)',
				'05:00-05:59(卯)',
				'06:00-06:59(卯)',
				'07:00-07:59(辰)',
				'08:00-08:59(辰)',
				'09:00-09:59(巳)',
				'10:00-10:59(巳)',
				'11:00-11:59(午)',
				'12:00-12:59(午)',
				'13:00-13:59(未)',
				'14:00-14:59(未)',
				'15:00-15:59(申)',
				'16:00-16:59(申)',
				'17:00-17:59(酉)',
				'18:00-18:59(酉)',
				'19:00-19:59(戌)',
				'20:00-20:59(戌)',
				'21:00-21:59(亥)',
				'22:00-22:59(亥)',
				'23:00-23:59(子)',
			], // 时辰
			selectValue: [0, 0, 0, 0], //默认
			type: '', // solar公历 lunar农历
			dateInfo: {}, // 完整日期数据
			date: '', // 显示日期
			indicatorStyle: `height: ${Math.round(
				uni.getSystemInfoSync().screenWidth / (750 / 100)
			)}px;`,
		};
	},
	watch: {
		selectValue(newV, oldV) {
			this.getYear();
			this.getMonth();
			this.getDay();
		},
	},
	props: {
		showCalendar: {
			type: Boolean,
			default: () => false,
		},
		defaultValue: {
			type: Array,
			default: () => [0, 0, 0, 0],
		},
		defaultType: {
			type: String,
			default: () => 'solar',
		},
		minYear: {
			type: Number,
			default: () => 1960,
		},
		maxYear: {
			type: Number,
			default: () => new Date().getFullYear(),
		},
		isSwitch: {
			type: Boolean,
			default: true,
		},
	},
	mounted() {
		this.type = this.defaultType;
		const selectValue = this.defaultValue;
		const year = selectValue[0] + this.minYear;
		const month = selectValue[1] + 1;
		const day = selectValue[2] + 1;
		const time = this.times[selectValue[3]];
		const dt = calendar.solar2lunar(year, month, day);
		this.date = dt.date;
		this.dateInfo = {
			date: this.date,
			time: time,
		};
		this.getYear();
		this.getMonth();
		this.getDay();
		this.setPicker(selectValue, this.type);
	},
	methods: {
		// 支持父组件调用设置初值
		async setPicker(selectValue, type, isLeap) {
			this.selectValue = (await selectValue) || this.defaultValue;
			this.type = type;
		},
		getYear() {
			this.years = [];
			if (this.type === 'solar') {
				for (let i = this.minYear; i <= this.maxYear; i++) {
					// 年
					this.years.push(i);
				}
				this.getMonth();
				return;
			}
			if (this.type === 'lunar') {
				for (let i = this.minYear; i <= this.maxYear; i++) {
					// 年
					this.years.push(calendar.toChinaYear(i));
				}
				return;
			}
		},
		getMonth() {
			this.months = [];
			if (this.type === 'solar') {
				for (let i = 1; i <= 12; i++) {
					//月
					this.months.push(i + '月');
				}
				return;
			}

			if (this.type === 'lunar') {
				const year = this.selectValue[0] + this.minYear;
				const leap_month = calendar.leapMonth(year);
				//返回农历 闰月没有就返回0
				for (let i = 1; i <= 12; i++) {
					this.months.push(calendar.toChinaMonth(i));
					if (i == leap_month) {
						this.months.push('闰' + calendar.toChinaMonth(i));
					}
				}
				return;
			}
		},
		getDay() {
			this.days = [];
			const year = this.selectValue[0] + this.minYear;
			const month = this.selectValue[1] + 1;
			if (this.type === 'solar') {
				for (let i = 1; i <= calendar.solarDays(year, month); i++) {
					//日
					this.days.push(i + '日');
				}
				return;
			}

			if (this.type === 'lunar') {
				if (
					calendar.leapMonth(year) != 0 &&
					(calendar.leapMonth(year) == month ||
						month - 1 == calendar.leapMonth(year))
				) {
					for (
						let i = 1;
						i <= calendar.leapDays(year, calendar.leapMonth(year));
						i++
					) {
						this.days.push(calendar.toChinaDay(i));
					}
				} else {
					let lunarMonth = '';
					if (calendar.leapMonth(year)) {
						lunarMonth = month < calendar.leapMonth(year) ? month : month - 1;
					} else {
						lunarMonth = month;
					}
					for (let i = 1; i <= calendar.monthDays(year, lunarMonth); i++) {
						this.days.push(calendar.toChinaDay(i));
					}
				}
				return;
			}
		},
		bindChange(e) {
			const val = e.detail.value;
			const year = val[0] + this.minYear;
			const month = val[1] + 1;
			const day = val[2] + 1;
			const time = this.times[val[3]];
			let date;
			if (this.type === 'solar') {
				const dt = calendar.solar2lunar(year, month, day);
				date = dt.date;
			} else {
				const dt = calendar.lunar2solar(year, month, day, this.dateInfo.isLeap);
				date = dt.lunarDate;
			}

			this.selectValue = val;
			this.date = date;
			this.dateInfo = {
				date: date,
				time: time,
			};
		},
		cancel() {
			this.$emit('cancel');
		},
		async switchBtn(type) {
			//切换
			this.type = await type;
			const selectValues = [0, 0, 0, 0];
			const year = selectValues[0] + this.minYear;
			const month = selectValues[1] + 1;
			const day = selectValues[2] + 1;
			const time = this.times[selectValues[3]];
			const dt = calendar.solar2lunar(year, month, day);
			this.date = dt.date;
			this.selectValue = selectValues;
			this.dateInfo = {
				date: this.date,
				time: time,
			};
		},
		confirmFun() {
			// 确定
			const dateObj = this.dateInfo;
			dateObj.type = this.type;
			this.$emit('confirm', dateObj);
		},
	},
};
</script>

<style lang="scss" scope>
.mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 750rpx;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.3);
	z-index: 9999999;
}
.u-mask-zoom {
	transform: scale(1, 1);
}
.calendar {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		// height: 100%;
		background-color: #fff;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		.title {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 86rpx;
			border-bottom: 2rpx solid #e6e6e6;
			width: 100%;
			justify-content: space-between;
			// border: 1rpx solid red;
			background-color: #ffffff;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
			/* #ifdef MP-WEIXIN */
			margin-top: 0;
			/* #endif */
			.left {
				color: #666666;
				font-size: 30rpx;
				padding-left: 30rpx;
			}
			.sure {
				color: #eb344a;
				font-size: 30rpx;
				padding: 0 30rpx;
			}
		}
		picker-view {
			width: 100%;
			height: 550rpx;
			margin-top: 20rpx;
			::v-deep .item {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}
			.uni-picker-view-wrapper {
				.uni-picker-view-column {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
					.uni-picker-view-group {
						.uni-picker-view-content {
							text-align: center;

							// line-height: 110rpx;
							.item {
								display: flex;
								align-items: center;
								justify-content: center;
								color: #333333;
								font-size: 32rpx;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
		.bottom {
			height: 110rpx;
			width: calc(100% - 31rpx);
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 31rpx;
			background-color: #ffffff;
			.switch {
				background-color: #e6e6e6;
				width: 180rpx;
				height: 70rpx;
				display: flex;
				flex-direction: row;
				border-radius: 35rpx;
				justify-content: space-around;
				align-items: center;
				position: relative;
				.left {
					position: absolute;
					z-index: 1;
					left: 25%;
					font-size: 28rpx;
					transform: translateX(-50%);
				}
				.right {
					color: #333333;
					font-size: 28rpx;
					position: absolute;
					right: 0;
					transform: translateX(-25%);
					color: #333333;
					z-index: 1;
				}
				.bg {
					background-color: #eb344a;
					color: #333333;
					height: 70rpx;
					border-radius: 40rpx;
					width: 90rpx;
					position: absolute;
					// right: 0;
					top: 0;
					z-index: 0;
				}
				.active {
					color: #ffffff;
				}
				.lunar {
					left: 90rpx;
					animation: switchsolar 500ms;
				}
				@keyframes switchsolar {
					0% {
						left: 0;
					}
					100% {
						left: 90rpx;
					}
				}
				.solar {
					left: 0;
					animation: switchlunar 500ms;
				}
				@keyframes switchlunar {
					0% {
						left: 90rpx;
					}
					100% {
						left: 0;
					}
				}
			}
		}
	}
}
</style>
